<template>
  <el-card class="container-card">
    <el-table
      :data="permissionList"
      :tree-props="{ children: 'children' }"
      row-key="id"
      :expand-row-keys="['1']"
      border
    >
      <el-table-column prop="name" label="名称" sortable width="180" />
      <el-table-column prop="code" label="权限值" sortable width="180" />
      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            circle
            @click="dialogPermission(row)"
            :disabled="row.level === 4"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            v-if="$hasBP('btn.Permission.remove')"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form label-width="120px">
        <el-form-item label="父级名称" v-if="currentPermisson.level !== 1">
          <el-input :value="currentPermisson.name" disabled />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editPermission.name" />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="editPermission.code" />
        </el-form-item>
        <el-form-item
          label="路由跳转权限值"
          v-if="currentPermisson.level !== 1 && currentPermisson.level !== 2"
        >
          <el-input v-model="editPermission.toCode" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="savePermission">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [],
      dialogVisible: false,
      currentPermisson: {},
      editPermission: {
        name: '',
        code: '',
        toCode: ''
      }
    }
  },
  mounted() {
    this.getPermissoinList()
  },
  computed: {
    dialogTitle() {
      let { level } = this.currentPermisson
      const title = ['一级菜单', '二级菜单', '功能']
      return `添加${title[level - 1]}`
    }
  },
  methods: {
    async getPermissoinList() {
      const res = await this.$API.permission.reqGetPermissonList()
      this.permissionList = res.children
    },
    dialogPermission(row) {
      this.dialogVisible = true
      this.currentPermisson = row
    },
    async savePermission() {
      const { id: pid, level } = this.currentPermisson
      const { name, code, toCode } = this.editPermission
      const data = {
        name,
        code,
        toCode,
        level,
        pid
      }
      await this.$API.permission.reqSavePermission(data)
      this.dialogVisible = false
      this.editPermission={}
      this.$message.success('添加成功')
      this.getPermissoinList()
    }
  }
}
</script>

<style></style>
